<script setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { jumpper } from "../apis/jump";
const props = defineProps({
  width: {
    type: String,
    default: "100%",
  },
  style: String,
  data: Array,
  header: Object,
});

const router = useRouter();
const jump = (e) => {
  if (e === 0) {
    router.push("/index");
    return;
  }
  jumpper().then((res) => {
    if (res.code === 2001 && e !== 0) {
      router.push({ name: "gn" + e }); //生成功能跳转列表,e代表顺序，务必与路由中定义的顺序相同
    } else {
      router.push("/index");
    }
  });
};
// 菜单栏状态
let flag = false;
const open = () => {
  if (flag) {
    $(".menuBox").css("display", "none");
  } else {
    $(".menuBox").css("display", "block");
  }
  flag = !flag;
};
</script>

<template>
  <div class="List" :style="props.style">
    <div class="container">
      <table :width="props.width">
        <tbody>
          <tr v-for:="(row, key) in props.data">
            <td>
              <!-- 首页 -->
              <div v-if="key < 1" class="link" @click="jump(key)">
                <div class="rlink">{{ row }}&emsp;&nbsp;</div>
              </div>
              <!-- 菜单 -->
              <div v-if="key < 1" class="link" @click="open()">
                <div class="rlink">菜单&emsp;&nbsp;</div>
              </div>
              <!-- 菜单内容 -->
              <div v-else class="menuBox">
                <div @click="jump(key)">
                  <div class="rlink">&emsp;{{ row }}</div>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<style scoped>
.List {
  background-color: rgba(253, 253, 253, 0.8);
  position: absolute;
  overflow: hidden;
  z-index: 10;
}
.container {
  height: calc(100% + 20px);
  width: calc(100% + 20px);
  overflow-y: scroll;
  color: rgb(0, 0, 0);
}
.link {
  width: 100%;
  height: 50px;

  border-bottom: 1px solid rgb(156, 137, 174);
  letter-spacing: 10px;
}
.link:hover {
  filter: drop-shadow(0 0 2em #141414aa);
  background-color: rgba(66, 56, 102, 0.8);
}
.rlink {
  font: 500 20px "";
  text-decoration: none;
  color: whitesmoke;
  text-align: center;
  position: absolute;
  left: 10%;
  padding-top: 5%;
}
.menuBox {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid rgb(156, 137, 174);
  letter-spacing: 10px;
  display: none;
}
.menuBox:hover {
  border-color: red;

  background-color: rgba(240, 240, 240, 0.5);
}
</style>
